<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-model.number 强制转成数字
        v-model.lazy 懒监听
        v-model.trim 去除空格

        收集表单数据:
            若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
            若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值.
            若:<input type="checkbox"/>
                1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
                2.配置input的value成性:
                    (1)v-model的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
                    (2)v-model的初始值是数组，那么收集的的就是value组成的数组
            备注:v-model的三个修饰符:
                1azy:失去焦点再收集数据
                number:输入学符非转为有效的数学
                trim:输入首尾空格过滤
    -->
    <div id="app">
        <form @submit.prevent="demo">
            <div> 账号：<input type="text" placeholder="请输入账号" v-model.trim="account">
            </div>
            <div> 密码：<input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <div> 性别： 男<input type="radio" name="sex" value="male" v-model="sex"> 女<input type="radio" name="sex"
                    value="female" v-model="sex">
            </div>
            <div> 年纪：<input type="number" placeholder="请输入密码" v-model.number="age">
            </div>
            <div> 爱好：学习<input type="checkbox" value="学习" v-model="hobby"> 打游戏<input type="checkbox" value="打游戏"
                    v-model="hobby">吃饭<input type="checkbox" value="吃饭" v-model="hobby">
            </div>
            <div> 所属校区：<select v-model="city">
                    <option value="">请选择校区</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                    <option value="天津">天津</option>
                </select>
            </div>
            <div> 其他信息: <textarea value="" v-model.lazy="otherInfo"></textarea>
            </div>
            <div>
                <input type="checkbox" v-model="agree">阅读并接受<a href="#">《用户协议》</a>
            </div>
            <div>
                <button>提交</button>
            </div>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            data() {
                return {
                    account: '',
                    password: '',
                    age: 18,
                    sex: "male",
                    hobby: [],
                    city: '上海',
                    otherInfo: '',
                    agree: ""
                }
            },
            methods: {
                demo() {
                    console.log("提交信息", JSON.stringify(this._data))

                }
            }

        })

        vm.$mount('#app')
    </script>
</body>

</html>